import React, { Component } from 'react';
import '../../style/login.less';
import { Loging,getBase64 } from '../../service/loginService';
import { Form, Icon, Input, Button, Checkbox, message, Spin } from 'antd';
const FormItem = Form.Item;

const login = [{
    username: 'admin',
    password: 'admin'
}, {
    username: 'zysoft',
    password: 'zysoft'
}];

function PatchUser(values) {  //匹配用户
    let isOk = 1;
    login.map(function (item) {
        if (values.username === item.username && values.password === item.password) {
            return isOk || 1;
        } else {
            return isOk || 0;
        }
    });
};

class NormalLoginForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoding: false,
            src:'',
        };
    }

    componentDidMount() {
       this.getBase64().then(result=>{
           this.setState({src:result})
       })
    }

    async getBase64()
    {
        let imgBase64 = await getBase64()
        let src = `data:image/jpg;base64,${imgBase64} `
        return src;
    }

    async  login(user, password,validata) {

        let result = await Loging({ userName: user, password: password, validata: validata });
        return result;
    }


    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
               let  result = this.login(values.username, values.password,values.validata).then(result => {
                    if (result) {
                        if(result.code==='0')
                        {
                            console.log("结果",result);
                            message.error('验证码错误!'); //失败信息
                        }
                        else
                        {
                            if(result.bRes===false)
                            {
                                message.error('账号密码错误错误!'); //失败信息
                            }
                            else 
                            {
                                console.log("结果",result);
                                this.setState({
                                    isLoding: true,
                                });
        
                                localStorage.setItem('mspa_user', JSON.stringify(result));
                                message.success('login successed!'); //成功信息
                                let that = this;
                                setTimeout(function () { //延迟进入
                                    that.props.history.push({ pathname: '/app', state: values });
                                }, 2000);   
                            }
                           
                        }
                       
                    }
                    else {
                        message.error('login failed!'); //失败信息
                    }
                });


                // if(this.checkUser(values.username,values.password)){
                //     this.setState({
                //         isLoding: true,
                //     });

                //     localStorage.setItem('mspa_user',JSON.stringify(values));
                //     message.success('login successed!'); //成功信息
                //     let that = this;
                //     setTimeout(function() { //延迟进入
                //         that.props.history.push({pathname:'/app',state:values});
                //     }, 2000);

                // }else{
                //     message.error('login failed!'); //失败信息
                // }
            }
        });
    };

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            this.state.isLoding ? <Spin size="large" className="loading" /> :
                <div className="login">
                    <div className="login-form">
                        <div className="login-logo">
                            <div className="login-name">MSPA</div>
                        </div>
                        <Form onSubmit={this.handleSubmit} style={{ maxWidth: '300px' }}>
                            <FormItem>
                                {getFieldDecorator('username', {
                                    rules: [{ required: true, message: '请输入用户名!' }],
                                })(
                                    <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="用户名" />
                                )}
                            </FormItem>
                            <FormItem>
                                {getFieldDecorator('password', {
                                    rules: [{ required: true, message: '请输入密码!' }],
                                })(
                                    <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="密码" />
                                )}
                            </FormItem>

                             <FormItem>
                                {getFieldDecorator('validata', {
                                    rules: [{ required: true, message: '请输入验证码!' }],
                                })(
                                    <Input  type="text" placeholder="验证码" />
                                )}
                                <img src={this.state.src} ></img>
                            </FormItem>
                            <FormItem style={{ marginBottom: '0' }}>
                                {getFieldDecorator('remember', {
                                    valuePropName: 'checked',
                                    initialValue: true,
                                })(
                                    <Checkbox>记住我</Checkbox>
                                )}
                                <a className="login-form-forgot" href="" style={{ float: 'right' }}>忘记密码?</a>
                                <Button type="primary" htmlType="submit" className="login-form-button" style={{ width: '100%' }}>
                                    登录
                            </Button>
                                Or <a href="">现在就去注册!</a>
                            </FormItem>
                        </Form>
                        <a className="githubUrl" href="https://github.com/zhaoyu69/antd-spa"> </a>
                    </div>
                </div>
        );
    }
}

const Login = Form.create()(NormalLoginForm);
export default Login;